<template>
  <div class="overview-page">
    <!-- 数据概览卡片组 -->
    <div class="overview-cards mb-8">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600">
            <div class="card-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ stats.articleCount }}</div>
              <div class="card-label">文章</div>
            </div>
            <div class="card-trend">
              <span class="trend-value">+15%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card bg-gradient-to-br from-green-500 to-green-600">
            <div class="card-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ stats.postCount }}</div>
              <div class="card-label">动态</div>
            </div>
            <div class="card-trend">
              <span class="trend-value">+23%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="stat-card bg-gradient-to-br from-purple-500 to-purple-600"
          >
            <div class="card-icon">
              <el-icon><Location /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ stats.guideCount }}</div>
              <div class="card-label">攻略</div>
            </div>
            <div class="card-trend">
              <span class="trend-value">+18%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="stat-card bg-gradient-to-br from-orange-500 to-orange-600"
          >
            <div class="card-icon">
              <el-icon><Picture /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ stats.photoCount }}</div>
              <div class="card-label">摄影</div>
            </div>
            <div class="card-trend">
              <span class="trend-value">+30%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区 -->
    <el-row :gutter="20">
      <!-- 左侧内容 -->
      <el-col :span="16">
        <!-- 待办事项 -->
        <el-card class="mb-6" shadow="hover">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-icon class="mr-2 text-primary-500"><Bell /></el-icon>
                <span class="text-lg font-medium">待办事项</span>
              </div>
              <el-tag type="info" effect="plain"
                >{{ pendingTotal }}个待处理</el-tag
              >
            </div>
          </template>
          <div class="pending-items grid grid-cols-2 gap-4">
            <div
              class="pending-item"
              @click="router.push('/user/orders?status=unpaid')"
            >
              <div class="item-icon bg-red-100 text-red-500">
                <el-icon><Wallet /></el-icon>
              </div>
              <div class="item-info">
                <div class="item-label">待付款</div>
                <div class="item-value">{{ stats.unpaidCount }}</div>
              </div>
            </div>
            <div
              class="pending-item"
              @click="router.push('/user/orders?status=unreceived')"
            >
              <div class="item-icon bg-blue-100 text-blue-500">
                <el-icon><Box /></el-icon>
              </div>
              <div class="item-info">
                <div class="item-label">待收货</div>
                <div class="item-value">{{ stats.unreceivedCount }}</div>
              </div>
            </div>
            <div class="pending-item" @click="router.push('/user/reviews')">
              <div class="item-icon bg-green-100 text-green-500">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <div class="item-info">
                <div class="item-label">待评价</div>
                <div class="item-value">{{ stats.unreviewedCount }}</div>
              </div>
            </div>
            <div
              class="pending-item"
              @click="router.push('/user/orders?status=refund')"
            >
              <div class="item-icon bg-orange-100 text-orange-500">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="item-info">
                <div class="item-label">退款/售后</div>
                <div class="item-value">{{ stats.refundCount }}</div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 最近动态 -->
        <el-card shadow="hover" class="mb-6">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-icon class="mr-2 text-primary-500"><Timer /></el-icon>
                <span class="text-lg font-medium">最近动态</span>
              </div>
              <el-button type="primary" link @click="viewAllActivities">
                查看全部
                <el-icon class="ml-1"><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="activities-list space-y-4">
            <div
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item flex items-start p-4 hover:bg-gray-50 rounded-lg transition-colors"
            >
              <div class="activity-icon">
                <el-icon class="text-2xl text-primary-500">
                  <component :is="activity.icon" />
                </el-icon>
              </div>
              <div class="activity-content ml-4 flex-1">
                <div
                  class="activity-text text-gray-700"
                  v-html="activity.content"
                ></div>
                <div class="activity-time text-sm text-gray-500 mt-1">
                  {{ formatDate(activity.time) }}
                </div>
              </div>
            </div>
            <el-empty
              v-if="recentActivities.length === 0"
              description="暂无动态"
            />
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="8">
        <!-- 社区数据 -->
        <el-card shadow="hover" class="mb-6">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2 text-primary-500"><Histogram /></el-icon>
              <span class="text-lg font-medium">社区数据</span>
            </div>
          </template>
          <div class="community-stats space-y-4">
            <div
              class="stat-row flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
            >
              <div class="stat-label text-gray-600">参与话题</div>
              <div class="stat-value font-medium text-gray-900">
                {{ stats.topicCount }}
              </div>
            </div>
            <div
              class="stat-row flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
            >
              <div class="stat-label text-gray-600">参与活动</div>
              <div class="stat-value font-medium text-gray-900">
                {{ stats.activityCount }}
              </div>
            </div>
            <div
              class="stat-row flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
            >
              <div class="stat-label text-gray-600">发表评论</div>
              <div class="stat-value font-medium text-gray-900">
                {{ stats.commentCount }}
              </div>
            </div>
            <div
              class="stat-row flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
            >
              <div class="stat-label text-gray-600">收到回复</div>
              <div class="stat-value font-medium text-gray-900">
                {{ stats.replyCount }}
              </div>
            </div>
          </div>
        </el-card>

        <!-- 未使用门票 -->
        <el-card shadow="hover">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-icon class="mr-2 text-primary-500"><Ticket /></el-icon>
                <span class="text-lg font-medium">未使用门票</span>
              </div>
              <el-button
                type="primary"
                link
                @click="router.push('/user/orders?type=ticket&status=paid')"
              >
                查看全部
                <el-icon class="ml-1"><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="unused-tickets space-y-4">
            <div
              v-for="ticket in unusedTickets"
              :key="ticket.orderNo"
              class="ticket-item p-4 hover:bg-gray-50 rounded-lg cursor-pointer"
              @click="viewTicketDetail(ticket)"
            >
              <div class="flex items-start">
                <el-image
                  :src="ticket.booking?.spotImage"
                  class="w-20 h-20 rounded-lg object-cover"
                />
                <div class="ml-4 flex-1">
                  <div class="text-base font-medium text-gray-900">
                    {{ ticket.booking?.spotName }}
                  </div>
                  <div class="text-sm text-gray-600 mt-1">
                    {{ ticket.booking?.ticketName }}
                  </div>
                  <div class="text-sm text-gray-500 mt-2">
                    游玩日期：{{ formatDate(ticket.booking?.visitDate) }}
                  </div>
                  <div class="text-sm text-primary-500 mt-1">
                    {{ ticket.booking?.quantity }}张
                  </div>
                </div>
              </div>
            </div>
            <el-empty
              v-if="unusedTickets.length === 0"
              description="暂无未使用门票"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Document,
  ChatDotRound,
  Picture,
  Location,
  Timer,
  ArrowRight,
  Bell,
  Wallet,
  Box,
  Warning,
  Histogram,
  Ticket,
} from "@element-plus/icons-vue";

const router = useRouter();

// 统计数据
const stats = ref({
  articleCount: 5,
  postCount: 12,
  guideCount: 3,
  photoCount: 8,
  topicCount: 15,
  activityCount: 6,
  commentCount: 45,
  replyCount: 32,
  unpaidCount: 2,
  unreceivedCount: 1,
  unreviewedCount: 3,
  refundCount: 0,
});

// 计算待处理总数
const pendingTotal = computed(() => {
  return (
    stats.value.unpaidCount +
    stats.value.unreceivedCount +
    stats.value.unreviewedCount +
    stats.value.refundCount
  );
});

// 最近动态
const recentActivities = ref([
  {
    id: 1,
    icon: "ChatDotRound",
    content:
      '发表了文章 <a href="#" class="text-primary-500 hover:text-primary-600">贵港美食攻略：寻味八桂名城</a>',
    time: "2024-03-20 10:00:00",
  },
  {
    id: 2,
    icon: "Star",
    content:
      '收藏了攻略 <a href="#" class="text-primary-500 hover:text-primary-600">贵港两日游完全指南</a>',
    time: "2024-03-19 15:30:00",
  },
]);

// 添加未使用门票数据
const unusedTickets = ref([]);

// 获取未使用门票数据
const fetchUnusedTickets = async () => {
  try {
    const response = await fetch("/api/user/tickets/unused");
    const data = await response.json();
    unusedTickets.value = data.tickets || [];
  } catch (error) {
    console.error("获取未使用门票失败:", error);
    ElMessage.error("获取未使用门票数据失败");
  }
};

// 查看门票详情
const viewTicketDetail = (ticket) => {
  router.push(`/user/orders/${ticket.orderNo}`);
};

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
};

// 查看全部动态
const viewAllActivities = () => {
  router.push("/user/posts");
};

onMounted(() => {
  fetchUnusedTickets();
});
</script>

<style lang="scss" scoped>
.overview-page {
  @apply p-6;

  .overview-cards {
    .stat-card {
      @apply p-6 rounded-xl text-white relative overflow-hidden transition-transform hover:scale-105 cursor-pointer;

      &::before {
        content: "";
        @apply absolute inset-0 bg-white opacity-10;
      }

      &::after {
        content: "";
        @apply absolute -right-4 -bottom-4 w-24 h-24 bg-white opacity-10 rounded-full;
      }

      .card-icon {
        @apply mb-4;

        .el-icon {
          @apply text-3xl;
        }
      }

      .card-info {
        @apply relative z-10;

        .card-value {
          @apply text-3xl font-bold mb-1;
        }

        .card-label {
          @apply text-sm opacity-90;
        }
      }

      .card-trend {
        @apply mt-2 text-sm;

        .trend-value {
          @apply font-medium mr-2;
        }

        .trend-label {
          @apply opacity-75;
        }
      }
    }
  }

  .pending-items {
    .pending-item {
      @apply flex items-center p-4 rounded-lg cursor-pointer transition-all hover:shadow-md;

      .item-icon {
        @apply w-12 h-12 rounded-full flex items-center justify-center mr-4;

        .el-icon {
          @apply text-2xl;
        }
      }

      .item-info {
        .item-label {
          @apply text-gray-600 mb-1;
        }

        .item-value {
          @apply text-2xl font-bold text-gray-900;
        }
      }
    }
  }

  .activities-list {
    .activity-item {
      .activity-icon {
        @apply flex-shrink-0;
      }

      .activity-content {
        .activity-text {
          a {
            @apply transition-colors;
          }
        }
      }
    }
  }

  .community-stats {
    .stat-row {
      @apply transition-colors;
    }
  }
}
</style>
